<template>
    <a-form
        :form="form"
        class="register-form"
        @submit="handleSubmit"
    >
        <a-form-item>
            <a-input
                v-decorator="['username',{rules: [{required: true,message: '请输入账号'}]}]"
                placeholder="账号"
            >
                <a-icon slot="prefix" type="user" style="color: rgba(0, 0, 0, 0.25)" />
            </a-input>
        </a-form-item>
        <a-form-item>
            <a-input
                v-decorator="['password',{rules: [{required: true,message: '请输入密码'}]}]"
                type="password"
                placeholder="密码"
            >
                <a-icon slot="prefix" type="lock" style="color: rgba(0, 0, 0, 0.25)" />
            </a-input>
        </a-form-item>
        <a-form-item>
            <a-input
                v-decorator="['confirmPass',{rules: [{required: true,message: '请确认密码'}]}]"
                type="password"
                placeholder="确认密码"
            >
                <a-icon slot="prefix" type="lock" style="color: rgba(0, 0, 0, 0.25)" />
            </a-input>
        </a-form-item>
        <a-form-item>
            <a-button
                type="primary"
                html-type="submit"
                class="register-form-button"
            >
                注册
            </a-button>
        </a-form-item>
    </a-form>
</template>
<script>
import factory from "./factory";
export default {
    name: "Register",
    data() {
        return {
        };
    },
    beforeCreate() {
        this.form = this.$form.createForm(this, { name: "register-form" });
    },
    methods: {
        handleSubmit(e) {
            e.preventDefault();
            this.form.validateFields(async(err, values) => {
                if (err) return;
                if(values.password !== values.confirmPass) {
                    return this.$message.error('两次输入密码不一致');
                }
                const res = await factory.register({
                    username: values.username,
                    password: values.password,
                });
                let data = res.data;
                // 注册失败
                if (data.meta.status !== 201) {
                    return this.$message.error(data.meta.message);
                }
                // 注册成功
                this.$message.success(data.meta.message);
                this.$emit('success');
            });
        }
    },
};
</script>

<style scoped lang='less'>
.register-form {
    .register-form-button {
        width: 100%;
        height: 40px;
    }
    :deep(.ant-input){
        height: 40px;
    }
    :deep(.ant-form-item){
        &:last-of-type{
            margin-bottom: 0;
        }
    }
}
</style>

